<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <title></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <!--====== Favicon Icon ======-->
   <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
   <!--====== Bootstrap CSS ======-->
   <link rel="stylesheet" href="/css/bootstrap.min.css">
   <!--====== default CSS ======-->
   <link rel="stylesheet" href="/css/default.css">
   <link rel="stylesheet" href="/font/bootstrap-icons.css">
   <!--====== Style CSS ======-->
   <link rel="stylesheet" href="/css/style.css">
   <!--====== myStyle CSS ======-->
   <link rel="stylesheet" href="/css/myStyle.css">
</head>
<body id="content-body">
   <!--[if IE]>
   <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
   <![endif]-->

   <!--====== PRELOADER PART START ======-->

   <div class="preloader">
      <div class="loader">
         <div class="ytp-spinner">
            <div class="ytp-spinner-container">
               <div class="ytp-spinner-rotator">
                  <div class="ytp-spinner-left">
                     <div class="ytp-spinner-circle"></div>
                  </div>
                  <div class="ytp-spinner-right">
                     <div class="ytp-spinner-circle"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!--====== PRELOADER PART ENDS ======-->

   <!--====== NAVBAR TWO PART START ======-->

   <section class="navbar-area sticky">
      <div class="container">
         <div class="row">
            <div class="col-lg-12">
               <nav class="navbar navbar-expand-lg">

                  <a class="navbar-brand" href="#">
                     <img src="/images/logo2.png" alt="Logo" width="64px">
                  </a>

                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTwo" aria-controls="navbarTwo" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="toggler-icon"></span>
                     <span class="toggler-icon"></span>
                     <span class="toggler-icon"></span>
                  </button>

                  <div class="collapse navbar-collapse sub-menu-bar" id="navbarTwo">
                     <ul class="navbar-nav m-auto">
                        <li class="nav-item"><a class="page-scroll" th:href="@{/#home}">首页</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/#content}">大赛介绍</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/#plan}">赛程流程</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/uis/enrollUI}">大赛报名</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/#books}">学习资料</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/#org}">组织机构</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/uis/welfareUI}">公益行</a></li>
                        <li class="nav-item active"><a class="page-scroll" th:href="@{/uis/cooperUI}">对外合作</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/uis/infomations}">下载</a></li>
                     </ul>
                  </div>

                  <div class="navbar-btn d-none d-sm-inline-block">
                     <ul>
                        <li><a class="solid" th:href="@{/uis/loginUI}">登陆</a></li>
                     </ul>
                  </div>
               </nav> <!-- navbar -->
            </div>
         </div> <!-- row -->
      </div> <!-- container -->
   </section>

   <!-- ==================== BANNER START============================= -->
   <div class="banner">
      <div class="layout">
         <h2>对外合作</h2>
         <h3>EXTERNAL COOPERATION</h3>
      </div>
   </div>
   <!-- ====================  BANNER END============================= -->

   <div class="container">
      <div class="cooper-panel">
         <div class="row">
            <div class="col-lg-6 left">
               <div class="left-title">商务合作</div>
               <div>
                  <p>商务合作的主要对象是政府、企业和高校，合作的内容主要是围绕着大赛及同期活动的各个环节，包括：</p>
                  <p>承办单位申请、承办校申请、招商合作申请、区域合作申请、会务服务申请、宣传推广申请等。</p>
                  <p>合作方需要提交自身介绍、申请内容、合作方案、实施方案等，我们将根据申请方提供的资料，确定合作方。并在网站上公布相应的合作授权。</p>
               </div>
            </div>
            <div class="col-lg-6 right">
               <div class="right-title">合作申请</div>
               <form id="myForm">
                  <input type="text" name="name" id="name" class="form-control" placeholder="机构名称*">
                  <select id="cooperType" name="cooperType" class="form-control">
                     <option value="">请选择合作类型*</option>
                     <option value="1">承办单位申请</option>
                     <option value="2">承办校申请</option>
                     <option value="3">招商合作申请</option>
                     <option value="4">区域合作申请</option>
                     <option value="5">会务服务申请</option>
                     <option value="6">宣传推广申请</option>
                  </select>
                  <input type="text" name="personName" id="personName" class="form-control" placeholder="负责人*">
                  <input type="text" name="position" id="position" class="form-control" placeholder="职务*">
                  <input type="text" name="mobile" id="mobile" class="form-control" placeholder="联系方式*">
                  <textarea name="detail" id="detail" class="form-control" placeholder="申请内容*"></textarea>

                  <input type="file" name="project" id="project" class="form-control">
                  <label for="project">
                     <i style="display:none;font-size: 36px" id="project_video" class="bi bi-camera-reels"></i>
                     <i style="display:none;font-size: 36px" id="project_file" class="bi bi-file-earmark-word"></i>
                  </label>
                  <input type="hidden" name="projectUrl" id="projectUrl" value="">
                  <label for="project" style="width:auto;margin-left:10px;color:#87CEFA">在这里上传您的合作方案(30M以内,必填)</label>

                  <input type="file" name="implement" id="implement" class="form-control">
                  <label for="implement">
                     <i style="display:none;font-size: 36px" id="implement_video" class="bi bi-camera-reels"></i>
                     <i style="display:none;font-size: 36px" id="implement_file" class="bi bi-file-earmark-word"></i>
                  </label>
                  <input type="hidden" name="implementUrl" id="implementUrl" value="">
                  <label for="implement" style="width:auto;margin-left:10px;color:#87CEFA">在这里上传您的执行方案(30M以内,必填)</label>

                  <div class="right-btn">
                     <input type="submit" value="申请合作" class="content-btn">
<!--                     <a class="content-btn" href="javascript:void(0)" onclick="document.getElementById('myForm').submit();">申请合作</a>-->
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
   <div th:insert="common/footer :: footer"></div>

   <!--====== Jquery js ======-->
   <script src="/js/jquery-1.12.4.min.js"></script>

   <!--====== Bootstrap js ======-->
   <script src="/js/bootstrap.min.js"></script>

   <script src="/js/jquery-validate.js"></script>
   <script src="/js/sweetalert.min.js"></script>

   <!--====== index  common js ======-->
   <script src="/js/common.js"></script>
   <script src="/js/layer/layer.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         $("#myForm").validate({
            rules: {
               name: {
                  required: true
               },
               cooperType: {
                  required: true
               },
               personName: {
                  required: true
               },
               position: {
                  required: true
               },
               mobile: {
                  required: true,
                  minlength: 11
               },
               detail: {
                  required: true,
                  maxlength: 300
               },
               projectUrl: {
                  required: true
               },
               implementUrl: {
                  required: true
               }
            },
            messages: {
               name: {
                  required: "请输入学校名称"
               },
               cooperType: {
                  required: "请选择合作类型"
               },
               personName: {
                  required: "请输入负责人"
               },
               position: {
                  required: "请输入职务"
               },
               mobile: {
                  required: "请输入手机号",
                  minlength: "手机号格式不正确"
               },
               detail: {
                  required: "请输入详细说明",
                  maxlength: "最多输入300字"
               },
               projectUrl: {
                  required: "请上传合作方案"
               },
               implementUrl: {
                  required: "请上传执行方案"
               }
            },
            submitHandler: function(form) {
               const formData = {
                  name: $('#name').val(),
                  cooperType: $('#cooperType').val(),
                  personName: $('#personName').val(),
                  position: $('#position').val(),
                  mobile: $('#mobile').val(),
                  type: 4,
                  detail: $('#detail').val(),
                  projectUrl: $('#projectUrl').val(),
                  implementUrl: $('#implementUrl').val()
               };
               $.ajax({
                  type: 'POST',
                  url: '/cooper',
                  data: formData,
                  dataType: 'json',
                  success: function(data) {
                     if(data.message!=null){
                        swal({
                           text: data.message,
                           icon: 'error'
                        });
                     }else{
                        swal({
                           text: "申请成功！",
                           icon: 'success'
                        });
                     }
                  },
                  error: function(jqXHR, textStatus, errorThrown) {
                     console.log('Error: ' + textStatus);
                  }
               });
            }
         });
      })

      $('#project').change(function(){
         if ($(this).val() !== undefined && $(this).val() !== "") {
            verificationPicFile(this, 30, 1);
         }
      })
      $('#implement').change(function(){
         if ($(this).val() !== undefined && $(this).val() !== "") {
            verificationPicFile(this, 30, 2);
         }
      })
      function verificationPicFile(file, fileMaxSize, type){
         let fileSize = 0;
         const filePath = file.value;
         if(filePath){
            fileSize =file.files[0].size;
            const size = fileSize / 1024 /1024;
            if (size > fileMaxSize) {
               alert("文件大小不能大于"+fileMaxSize+"MB！");
               file.value = "";
               return false;
            }else if (size <= 0) {
               alert("文件大小不能为0M！");
               file.value = "";
               return false;
            }
            return upload(type);
         }else{
            return false;
         }
      }
      function upload(type){
         const formData = new FormData();
         if(type === 1){
            formData.append("file", $('#project').prop('files')[0]);
         }else if(type === 2){
            formData.append("file", $('#implement').prop('files')[0]);
         }
         let li = undefined;
         $.ajax({
            type: 'POST',
            url: '/upload',
            data: formData,
            contentType: false, // 不设置内容类型，因为使用了 FormData
            processData: false, // 不处理数据，因为使用了 FormData
            beforeSend: function () {
               li = layer.load(0, {shade: [0.1, '#000']});
            },
            success: function(data) {
               layer.close(li);
               if(data.message!=null){
                  swal({
                     text: data.message,
                     icon: 'error'
                  });
               }else{
                  if(type === 1){
                     $('#projectUrl').attr('value', data.data);
                     if(data.data.endsWith('doc') || data.data.endsWith('docx')){
                        $('#project_file').show();
                        $('#project_video').hide();
                        $('#project').hide();
                     }else if(data.data.endsWith('mp4') || data.data.endsWith('avi')){
                        $('#project_video').show();
                        $('#project_file').hide();
                        $('#project').hide();
                     }
                  }
                  if(type === 2){
                     $('#implementUrl').attr('value', data.data);
                     if(data.data.endsWith('doc') || data.data.endsWith('docx')){
                        $('#implement_video').hide();
                        $('#implement_file').show();
                        $('#implement').hide();
                     }else if(data.data.endsWith('mp4') || data.data.endsWith('avi')){
                        $('#implement_file').hide();
                        $('#implement_video').show();
                        $('#implement').hide();
                     }
                  }

               }
            },
            error: function(jqXHR, textStatus, errorThrown) {
               layer.close(li);
               console.log('Error: ' + textStatus);
            }
         });
      }
   </script>
</body>
</html>
